<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="handleAdd"
          size="small"
          >新增会员信息</el-button
        ><br /><br />
        <el-form label-width="70px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="积分ID"
                ><el-input
                  placeholder="请输入积分ID"
                  v-model="query.search"
                ></el-input
              ></el-form-item>
            </el-col>

            <el-col :span="8">
              <el-button type="primary" @click="handleSearch" size="small"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!--tableData-->
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">{{
            (query.pageNum - 1) * query.pageSize + (scope.$index + 1)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="waresName"
          label="会员名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="priceType"
          label="价格类型"
          align="center"
        ></el-table-column>

        <el-table-column label="商品类型" align="center">
          <template slot-scope="scope">
            <el-tag :type="success">{{
              scope.row.waresType === 1
                ? "素金类"
                : scope.row.waresType === 2
                ? "钻石类"
                : scope.row.waresType === 3
                ? "镶金类"
                : "足金类"
            }}</el-tag>
          </template></el-table-column
        >

        <el-table-column
          prop="store"
          label="门店"
          align="center"
        ></el-table-column>

        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.enable === 1 ? 'success' : 'danger'">{{
              scope.row.enable === 1 ? "启用" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="起始时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.start | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.end | formatDate }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!--添加弹出框-->
    <el-dialog title="添加会员积分信息" :visible.sync="addVisible" width="60%">
      <el-form ref="form" :model="addForm" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品名称">
              <el-input v-model="addForm.waresName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="价格类型">
              <el-input v-model="addForm.priceType"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <!--  <el-form-item label="商品类型">
              <el-input v-model="addForm.waresType"></el-input>
            </el-form-item>-->
            <el-form-item label="商品品类">
              <el-select v-model="addForm.waresType" placeholder="请选择">
                <el-option
                  v-for="item in vipTypeArr"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                  >{{ item.label }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="门店">
              <el-input v-model="addForm.store"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否启用">
              <el-radio-group v-model="addForm.enable" size="small">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="2">禁用</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="起始日期">
              <el-col :span="10">
                <el-date-picker
                  v-model="addForm.start"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="10">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="addForm.start"
                ></el-time-picker>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="结束日期">
              <el-col :span="10">
                <el-date-picker
                  v-model="addForm.end"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="10">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="addForm.end"
                ></el-time-picker>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="saveAdd" class="liner" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--编辑对话框-->
    <el-dialog title="编辑会员积分信息" :visible.sync="editVisible" width="60%">
      <el-form ref="form" :model="editForm" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品名称">
              <el-input v-model="editForm.waresName"></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="价格类型">
              <el-input v-model="editForm.priceType"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <!-- <el-form-item label="商品类型">
              <el-input v-model="editForm.waresType"></el-input> </el-form-item
          >-->
            <el-form-item label="商品品类">
              <el-select v-model="editForm.waresType" placeholder="请选择">
                <el-option
                  v-for="item in vipTypeArr"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                  >{{ item.label }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="门店">
              <el-input v-model="editForm.store"></el-input> </el-form-item
          ></el-col>

          <el-col :span="8">
            <el-form-item label="是否启用">
              <el-radio-group v-model="editForm.enable" size="small">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="2">禁用</el-radio-button>
              </el-radio-group>
            </el-form-item></el-col
          >
        </el-row>

        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="起始日期">
              <el-col :span="10">
                <el-date-picker
                  v-model="editForm.start"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="10">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="editForm.start"
                ></el-time-picker>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="结束日期">
              <el-col :span="10">
                <el-date-picker
                  v-model="editForm.end"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="10">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="editForm.end"
                ></el-time-picker>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="saveEdit" class="liner" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//let currentDate = (new Date()).toLocaleString().substring(0,10).trim().replaceAll('/','-');
let queryParam = {
  start: "",
  end: "",
  enable: "",
  store: "",
  search: "",
  waresType: "",
  priceType: "",
  waresName: "",
  pageNum: 1,
  pageSize: 8
};
let addFormParam = {
  waresName: "",
  priceType: "",
  waresType: "",
  start: "",
  end: "",
  enable: "1",
  store: ""
};

export default {
  data() {
    return {
      query: { ...queryParam },
      tableData: [],
      multipleSelection: [],
      delList: [],
      dialogTitle: "",
      pageTotal: 0,
      addForm: { ...addFormParam },
      editStart: "",
      editEnd: "",
      editForm: {},
      searchList: [],
      allRoleName: [],
      editVisible: false,
      addVisible: false,
      idx: -1,
      id: -1,
      isAdd: false,
      vipTypeArr: [
        { value: "1", label: "素金类" },
        { value: "2", label: "钻石类" },
        { value: "3", label: "镶嵌类" },
        { value: "4", label: "足金类" }
      ]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios
        .post(
          // "http://172.16.6.136:8080/gold/Integral/findAll",
          this.$api.integralRules.integralfindAll,
          this.query
        )
        .then(res => {
          //console.log("所有客户信息__"+JSON.stringify(res));
          if (res.data.code == "1" && res.data.success == true) {
            console.log(res.data.data);
            console.log(res.data.data.list);
            this.tableData = res.data.data.list;
            this.pageTotal = res.data.data.total;
          }
        })
        .catch(err => {
          console.log(err);
          this.tableData = [];
          this.pageTotal = 0;
        });
    },

    /*点击搜索按钮时请求数据*/
    // 触发搜索按钮
    /*    handleSearch() {
        this.$set(this.query, "pageNum", 1);
        this.getData();
      },*/
    handleSearch() {
      console.log(this.search);
      console.log(this.query.search);
      this.$axios
        .post(
          // "http://172.16.6.136:8080/gold/integral/findById",
          this.$api.integralRules.integralfindById,
          {
            id: this.query.search,
            pageNum: this.query.pageNum,
            pageSize: this.query.pageSize
          }
        )
        .then(res => {
          console.log(res.data.data);
          console.log(res.data.data.list);
          if (res.data.code == "1" && res.data.success == true) {
            this.tableData = res.data.data.list;
            this.pageTotal = res.data.data.list.length;
            // this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("请求出错，请联系管理员");
        });
      this.$set(this.query, "pageNum", 1);
    },

    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$axios
            .get(
              // "http://172.16.6.136:8080/gold/Integral/delete",
              this.$api.integralRules.integraldelete,
              {
                params: {
                  id: row.id
                }
              }
            )
            .then(res => {
              if (res.data.code == "1" && res.data.success == true) {
                this.$message.success("删除成功");
                this.getData();
              } else if (res.data.code == "0" && res.data.success == false) {
                this.$message.warning(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {});
    },

    /*编辑操作*/
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      this.editForm.enable = row.enable == 1 ? "启用" : "禁用";
      this.editForm.start = new Date(this.editForm.start).getTime();
      this.editForm.end = new Date(this.editForm.end).getTime();
      this.editVisible = true;
      this.editForm = Object.assign({}, row); // 重置对象
      this.editForm.waresType =
        row.waresType == 1
          ? "素金类"
          : row.waresType == 2
          ? "钻石类"
          : row.waresType == 3
          ? "镶金类"
          : "足金类";
    },
    /*保存编辑*/
    saveEdit() {
      /*保存编辑后请求数据*/
      this.editVisible = false;
      console.log(this.editForm);
      console.log(this.editForm.start);
      console.log(this.editForm.end);
      this.$set(this.tableData, this.idx, this.editForm);
      this.$axios
        .post(
          // "http://172.16.6.136:8080/gold/Integral/update",
          this.$api.integralRules.integralupdate,
          this.editForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          console.log(res.data.data.list);
          this.$message.success("编辑成功");
          this.getData();
          // this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
      console.log("数据：" + this.editForm.date);
      console.log("对象数组", this.tableData);
    },

    //添加操作
    handleAdd() {
      this.addVisible = true;
      this.addForm = {
        id: "",
        waresName: "",
        priceType: "",
        waresType: "",
        store: "",
        enable: "1",
        start: "",
        end: ""
      };
    },

    //保存添加
    saveAdd() {
      console.log(this.addForm);
      this.addVisible = false;
      /*保存并请求数据*/
      this.$axios
        .post(
          // "http://172.16.6.136:8080/gold/Integral/insert",
          this.$api.integralRules.integralinsert,
          this.addForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          console.log(res.data);
          if (res.data.code == "1" && res.data.success == true) {
            this.$message.success(`添加成功`);
            this.getData();
            // this.tableData = res.data.data.list;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("请求出错，请联系管理员");
        });
    },

    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageNum", val);
      this.getData();
    }
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
